<template>
  <el-dialog
    v-model="dialogVisible"
    title="申请延期"
    width="600px"
    @close="handleClose"
  >
    <div v-if="permitData" class="extend-dialog">
      <el-alert
        title="延期申请说明"
        type="info"
        :closable="false"
        style="margin-bottom: 20px"
      >
        <p>许可证编号：{{ permitData.permitNumber }}</p>
        <p>原结束时间：{{ permitData.endTime }}</p>
      </el-alert>
      
      <el-form
        :model="extendForm"
        :rules="extendRules"
        ref="extendFormRef"
        label-width="120px"
      >
        <el-form-item label="延期原因" prop="reason">
          <el-select v-model="extendForm.reason" placeholder="请选择延期原因" style="width: 100%">
            <el-option label="作业进度延迟" value="progress_delay" />
            <el-option label="天气原因" value="weather" />
            <el-option label="设备故障" value="equipment_failure" />
            <el-option label="人员调整" value="personnel_change" />
            <el-option label="其他原因" value="other" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="延期说明" prop="description">
          <el-input
            v-model="extendForm.description"
            type="textarea"
            :rows="4"
            placeholder="请详细说明延期原因"
          />
        </el-form-item>
        
        <el-form-item label="新的结束时间" prop="newEndTime">
          <el-date-picker
            v-model="extendForm.newEndTime"
            type="datetime"
            placeholder="选择新的结束时间"
            style="width: 100%"
            :disabled-date="disabledDate"
          />
        </el-form-item>
        
        <el-form-item label="是否需要重新审批" prop="needReapproval">
          <el-radio-group v-model="extendForm.needReapproval">
            <el-radio :value="true">是，需要重新审批</el-radio>
            <el-radio :value="false">否，直接延期</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item v-if="extendForm.needReapproval" label="审批人员" prop="approver">
          <el-select v-model="extendForm.approver" placeholder="请选择审批人员" style="width: 100%">
            <el-option label="部门经理" value="manager" />
            <el-option label="安全主管" value="safety_manager" />
            <el-option label="生产主管" value="production_manager" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting">
        提交申请
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'

interface PermitData {
  id: number
  permitNumber: string
  endTime: string
}

interface ExtendForm {
  reason: string
  description: string
  newEndTime: string
  needReapproval: boolean
  approver: string
}

interface Props {
  modelValue: boolean
  permitData: PermitData | null
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const extendFormRef = ref<FormInstance>()
const submitting = ref(false)

const extendForm = reactive<ExtendForm>({
  reason: '',
  description: '',
  newEndTime: '',
  needReapproval: true,
  approver: ''
})

const extendRules: FormRules = {
  reason: [
    { required: true, message: '请选择延期原因', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入延期说明', trigger: 'blur' }
  ],
  newEndTime: [
    { required: true, message: '请选择新的结束时间', trigger: 'change' }
  ],
  needReapproval: [
    { required: true, message: '请选择是否需要重新审批', trigger: 'change' }
  ],
  approver: [
    { required: true, message: '请选择审批人员', trigger: 'change' }
  ]
}

// 禁用过去的日期
const disabledDate = (time: Date) => {
  return time.getTime() < Date.now()
}

// 提交申请
const handleSubmit = async () => {
  if (!extendFormRef.value) return
  
  try {
    await extendFormRef.value.validate()
    submitting.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    ElMessage.success('延期申请提交成功')
    emit('success')
    handleClose()
  } catch (error: any) {
    ElMessage.error(error.message || '提交失败')
  } finally {
    submitting.value = false
  }
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
  extendForm.reason = ''
  extendForm.description = ''
  extendForm.newEndTime = ''
  extendForm.needReapproval = true
  extendForm.approver = ''
  extendFormRef.value?.resetFields()
}

// 监听对话框显示状态
watch(dialogVisible, (visible) => {
  if (!visible) {
    handleClose()
  }
})
</script>

<style lang="scss" scoped>
.extend-dialog {
  .el-form-item {
    margin-bottom: 20px;
  }
}
</style>
